<template>
  <div class="post">
    <van-cell-group>
      <van-field v-model="title" label="标题" placeholder="点击请输入文章标题"/>
      <van-field
        v-model="message"
        label="留言"
        type="textarea"
        placeholder="请输入这一刻的想法"
        rows="1"
        autosize
      />
    </van-cell-group>
    <div class="flex_start img_list">
      <div v-for="item in imgArr" :key="item" class="img">
        <img :src="item">
      </div>
      <van-uploader :after-read="onRead">
        <van-icon name="plus"/>
      </van-uploader>
    </div>
    <div class="footer">
      <van-button type="primary" size="small">发布</van-button>
    </div>
  </div>
</template>
<script>
import { Field, Uploader, CellGroup, Icon, Button } from 'vant'
export default {
  components: {
    [Field.name]: Field,
    [Uploader.name]: Uploader,
    [CellGroup.name]: CellGroup,
    [Icon.name]: Icon,
    [Button.name]: Button
  },
  data() {
    return {
      title: '',
      message: '',
      imgArr: [],
      file: ''
    }
  },
  methods: {
    onRead(file) {
      // TOOD change
      this.file = file
    }
  }
}
</script>
<style lang="less" scoped>
.post {
  padding: 10px 10px;
  box-sizing: border-box;
  background-color: #fff;
  .van-uploader {
    width: 100px;
    height: 100px;
    border: 1px solid #e5e5e5;
    position: relative;
    .van-icon {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
  .img_list {
    margin-top: 10px;
    margin-bottom: 10px;
    .img {
      width: 100px;
      height: 100px;
    }
  }
  .footer {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-top: 20px;
  }
}
.flex_start {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
</style>
